<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>租金柱状图</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js"></script>
    <style>
    </style>
</head>
<body>
<div>
<h1 align="center">订单销售额趋势图</h1>
<div align="center">
    <!--下拉选择省份-->
    查询地址<select onchange="getData()"  id="a1" name="province"></select>
    <!--下拉选择医院-->
    医院名称<select  id="h1" name="province"></select>
    <label for="start">开始日期：</label><input id="start" type="date" />
    <label for="end">结束日期：</label><input id="end" type="date"/>
    <button onclick="getlineChart()">查询</button>
    <hr>
    <!-- 为ECharts准备一个具备大小（宽高）的DOM容器-->
    <div id='main' style='width: 90%;height:400px;' align="center"></div>
    <div align="center">
        <div id="win1" class="mini-window" title="BarChart" style="width:880px;height:650px;"
             showToolbar="false" showFooter="true" showModal="true" allowResize="true" >
            <div id="chartContainer" style="height:100%;width:100%;"></div>
        </div>
    </div>
    <hr>
</div>
</div>


</body>
</html>
<script type="text/javascript">
    $(function () {
        getData();
        showAddressList();
    });
    function showChartWindow() {
        getData();
    }
    //buttion调用的方法
    //按省份查医院
    function getData() {
        //获得排序下拉框的值
         var provinces= $("#a1").val();
        //异步请求
        $.post("../statistics/selectListDo",//访问地址
            {"province":provinces},//携带的参数
            function (data) {
                var str = "";
            $.each(data.hospitalList,function (index,hospital) {
                str+="<option value='"+hospital.hospitalId+"'>"+hospital.hospitalName;
                str+="</option>";
            });
                $("#h1").html(str);
            },
            "json"
        );
    }
    /*地址信息*/
    function showAddressList() {
        var str = "";
        $.post("../statistics/addressList",function (data) {
            $.each(data.addressList,function (index,address) {
                str+="<option value='"+address.province+"'>"+address.province;
                str+="</option>";
            });
            $("#a1").html(str);
        },"json");
    }
    //生成图标的方法
    function generateChart(data) {
    //基于准备好的DOM，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
    //指定图表的配置项和数据
        myChart.clear();
        var option = {
            title: {
                text: '订单额曲线图'
            },
        //提示框组件
            tooltip: {
         //坐标轴触发，主要用于柱状图，折线图等
                trigger: 'axis'
            },
        //数据全部显示
            axisLabel: {
                interval: 0
            },
            //图例
            legend: {
                data: ['订单额']
            },
             //横轴
            xAxis: {
                data: ["2020-10-2","2020-10-3","2020-10-4","2020-10-5","2020-10-6"]
            },
            //纵轴
            yAxis: {},
            //系列列表。每个系列通过type决定自己的图表类型
            series: [
                {
                    name: '订单额',
            //折线图
                    type: 'line',
                    data: [350,200,560,120,400]
                }
            ]
        };
    //使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    }
    //buttion调用的方法查询折线图
    function getlineChart() {
        var start = $("#start").val();
        var end = $("#end").val();
        var hids = $("#h1").val();
    //异步请求
        $.post(
            "../statistics/selectByTime",//访问地址
            {"start": start, "end": end,"hospitalId":hids},//携带的参数
            function (data) {
                generateChart(data);
            },
            "json"
        );
    }
</script>